<template>
	<div class="single-question">
		<div>
			<Checkbox v-if="showChecked" label="" @on-change="handleSelect($event,question)" v-model="question._checked" :disabled="question._disabled"></Checkbox>
			<span class="question-no" style="margin-right:0px">{{index+1}}、</span>
			<span class="question-name" v-text="question.name"></span>
			<Tag v-if="question.modeCode" class="question-type" color="blue">{{question.modeCode | modeFilter }}</Tag>
			<Tag v-if="question.difficulty" class="question-diffculty" color="green">{{question.difficulty | difficultyFilter}}</Tag>
			<Tag v-if="question.visibility" class="question-visibility" color="purple">{{question.visibility | filterIsPublic}}</Tag>
			<Button type="primary" @click="modSubject()" v-if="!isDetail" ghost style="width:80px;height:30px">修改</Button>
			<Button type="error" @click="delSubject()" v-if="!isDetail" ghost style="width:80px;height:30px">删除</Button>
			<span class="question-action" style="float:right;">
				<slot name="action" v-bind:question="question" v-bind:index="index">
					
				</slot>
			</span>
		</div>
		<div class="answer-wrapper">
			<template v-if="pattern === 'show'">
				<p v-for="answer in question.answers" :key="answer.answerId" :style="{color:answer.isRight ? '#2f70ff':''}" :class="{'is-detail': isDetail}">
					<span v-text="answer.description"></span>
					<template v-if="isDetail">
						<Progress :percent="answer.percent" status="success" hide-info class="my-progress"/>{{answer.percent}}%
					</template>
				</p>
			</template>
			<template v-else>
				<RadioGroup v-model="question.userAnswer" @on-change="selectAnswer($event,question,index)">
                  <div v-for="(questionAnswer,key) in question.answers" :key="key">
                    <Radio :label="questionAnswer.answerId" :disabled="disabledAnswer" >
                    	<span :style="{color:questionAnswer.isRight && showRightAnswer ? '#2f70ff':''}">{{questionAnswer.description}}</span>
                    </Radio>
                    <br />
                  </div>
                </RadioGroup>
			</template>
		</div>
	</div>
</template>
<script>
	import common from './mixin'
	export default{
		name:'SingleQuestion',
		mixins:[common],
		props:{
			isDetail: {
				type: Boolean,
				default: false
			},
			joined: {
				type: Number,
				default: 0
			},
			question:{
				type:Object,
				validator(value) {
					//1-单选
					return value.modeCode.toString() === '1' && value.name && value.answers
				},
			}
		},
		data(){
			return {
				
			}
		},
		methods:{
			selectAnswer(userAnswer,question,index){
				if(this.pattern === 'answer'){
					this.$emit('handleAnswerSelect',question,index,userAnswer);
				}
			},
			modSubject(){
				this.$emit('modSubject',this.question)
			},
			delSubject(){
				this.$emit('delSubject',this.question)
			}
		}
	}
</script>
<style scoped src="./question.css">

</style>

<style scoped>
.is-detail > span {
	display: block;
}

.is-detail /deep/ .ivu-progress {
	width: calc(100% - 80px);
	margin-right: 10px;
}

.my-progress /deep/ .ivu-progress-bg {
	background-color: #19be6b !important;
}
</style>